<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../../../js/boot.js"></script>

    <!-- 引入CodeMirror核心文件 -->
    <script type="text/javascript" src="../../../js/codemirror/lib/codemirror.js"></script>
    <link href="../../../js/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
    <link href="../../../js/codemirror/theme/monokai.css" rel="stylesheet" type="text/css">
    <link href="../../../js/codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">

    <!-- CodeMirror支持不同语言，根据需要引入JS文件 -->
    <!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
    <script type="text/javascript" src="../../../js/codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="../../../js/codemirror/mode/xml/xml.js"></script>
    <script type="text/javascript" src="../../../js/codemirror/mode/css/css.js"></script>
    <script type="text/javascript" src="../../../js/codemirror/mode/htmlmixed/htmlmixed.js"></script>

    <!-- 下面分别为显示行数、括号匹配和全屏插件 -->
    <script type="text/javascript" src="../../../js/codemirror/addon/selection/active-line.js"></script>
    <script type="text/javascript" src="../../../js/codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="../../../js/codemirror/addon/display/fullscreen.js"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="../../../js/codemirror/addon/fold/foldgutter.css" />
    <script src="../../../js/codemirror/addon/fold/foldcode.js"></script>
    <script src="../../../js/codemirror/addon/fold/foldgutter.js"></script>
    <script src="../../../js/codemirror/addon/fold/brace-fold.js"></script>
    <script src="../../../js/codemirror/addon/fold/comment-fold.js"></script>
</head>

<body>
    <textarea id="content" style="width:100%;height:100%;"></textarea>
</body>

<script type="text/javascript">

    var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        mode: 'htmlmixed',     // HMTL混合模式
        lineWrapping: true,    // 自动换行
        theme: 'monokai',      // 使用monokai模版
        lineWrapping: true, //代码折叠
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        extraKeys: { "Ctrl-Space": "autocomplete" },//ctrl-space唤起智能提示
        fullScreen: true
    });
    editor.setOption("extraKeys", {
        // Tab键换成4个空格
        Tab: function (cm) {
            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
            cm.replaceSelection(spaces);
        },
        // F11键切换全屏
        "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        // Esc键退出全屏
        "Esc": function (cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
    });


    function save() {
        //$("form").on('submit', function(e){
        // editor.save();
        // 或者获取数据
        // var data = editor.getValue();
        //}
    }


    function setContent(content) {
        // editor.setContent(content);
    }

    $(document).ready(function () {
        debugger
        var parent = window.parent;
        var html = parent.getHtmlCode();
        var code = html.innerHTML;
        // console.log(code);
        $("#content").text(code);
    });

    // ctrl+S保存事件
    document.onkeydown = function () {
        var oEvent = window.event;
        if (oEvent.keyCode == 83 && oEvent.ctrlKey) {
            alert("你按下了ctrl+S");
            return false;
        }
    }

    function updateCodeArea() {
        var parent = window.parent;
        var html = parent.getHtmlCode();
        var code = html.innerHTML;
        // $("#content").text(code);
        editor.setValue(code);
    }

    // 教程地址：https://blog.csdn.net/jlu_lei/article/details/80259697
</script>

</html>